import { ReactNode } from 'react';
import styles from './index.module.scss';
import classNames from 'classnames';

interface IInputProps
  // 高级写法 继承React内置的Props 简化input组件的属性定义
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  extra?: ReactNode;
  errorMsg?: string;
}

const Input: React.FC<IInputProps> = ({ placeholder, className, extra, errorMsg, ...rest }) => {
  return (
    <div className={styles.root}>
      <input placeholder={placeholder} className={classNames('input', className)} {...rest} />
      {extra && <div className="extra"> {extra} </div>}
      {errorMsg && <div className="validate">{errorMsg}</div>}
    </div>
  );
}

export default Input;
